<template>
    <div id="opportunityDetail">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">
                    <i class="iconfont icon-home nav-icon"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item to="/opportunity">销售机会管理</el-breadcrumb-item>
                <el-breadcrumb-item
                    class="no-active"
                >{{ isAppoint?'指派销售机会':($route.params.type==='edit'?'编辑销售机会':'新建销售机会') }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form
                ref="opportunityForm"
                :rules="rules"
                :model="form"
                label-width="90px"
                width="100%"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="编号">
                            <el-input :disabled="isAppoint" v-model="form.id" placeholder="请输入编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="机会来源">
                            <el-input
                                :disabled="isAppoint"
                                v-model="form.opportunitySource"
                                placeholder="请输入机会来源"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item inline-message label="客户名称" prop="customerName">
                            <el-input
                                :disabled="isAppoint"
                                v-model="form.customerName"
                                placeholder="请输入客户名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="联系人">
                            <el-input
                                :disabled="isAppoint"
                                v-model="form.linkman"
                                placeholder="请输入联系人"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话">
                            <el-input
                                :disabled="isAppoint"
                                v-model="form.linkPhone"
                                placeholder="请输入联系电话"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="成功几率" prop="probabilitySuccess">
                            <el-input
                                :disabled="isAppoint"
                                v-model.number="form.probabilitySuccess"
                                placeholder="请输入成功几率"
                            >
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="概要">
                            <el-input
                                :disabled="isAppoint"
                                v-model="form.summary"
                                placeholder="请输入概要"
                            ></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="创建人" prop="creater">
                                    <el-input
                                        v-model="form.creater"
                                        :disabled="true"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="创建时间" prop="createTime">
                                    <el-date-picker
                                        :disabled="true"
                                        v-model="form.createTime"
                                        format="yyyy年MM月dd日 HH时mm分"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        type="datetime"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="机会描述" prop="opportunitDescribe">
                            <el-input
                                :disabled="isAppoint"
                                type="textarea"
                                rows="3"
                                v-model="form.opportunitDescribe"
                                placeholder="请输入机会描述"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 判断路由传递的参数是否为指派销售机会，否则不显示  -->
                <el-row v-if="isAppoint">
                    <el-col :span="8">
                        <el-form-item label="指派给" prop="appointId">
                            <el-select v-model="form.appointId" placeholder="请选择要指派的人">
                                <el-option v-for="appoint of mgrList" :key="appoint.id" :label="appoint.realName" :value="appoint.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="指派时间" prop="appointTime">
                            <el-date-picker
                                v-model="form.appointTime"
                                format="yyyy年MM月dd日 HH时mm分"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                placeholder="请选择指派时间"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="btngroup" type="flex" justify="center">
                    <el-col :span="8">
                        <el-button-group>
                            <el-button
                                icon="el-icon-arrow-left"
                                type="success"
                                @click="$router.push('/opportunity')"
                            >返回</el-button>
                            <el-button
                                icon="el-icon-circle-check"
                                type="primary"
                                @click="handerSave('opportunityForm')"
                            >保存</el-button>
                            <el-button
                                icon="el-icon-phone-outline"
                                type="info"
                                @click="$message.info('敬请期待..')"
                            >帮助</el-button>
                        </el-button-group>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isAppoint: this.$route.params.type === 'appoint', //判断当前请求是否为指派页面
            form: { //表单信息
                creater:localStorage.getItem('ms_username'), //当前用户
                createTime:this.now() //当前系统时间
            }, 
            mgrList:[], //指派销售主管
            rules: {
                customerName: [{ required: true, message: '请输入客户名称', triggle: 'blue' }],
                probabilitySuccess: [{ type: 'number', required: true, message: '成功几率需为数字', triggle: 'blue' }],
                opportunitDescribe: [{ required: true, message: '请输入机会描述', triggle: 'blue' }],
                creater: [{ required: true, message: '请输入创建人', triggle: 'blue' }],
                createTime: [{ type: 'string', required: true, message: '请选择创建时间', triggle: 'change' }],
                appointId: [{  type: 'number', required: true, message: '请选择要指派的人', triggle: 'change' }],
                appointTime: [{ type: 'string', required: true, message: '请选择指派时间', triggle: 'change' }]
            }
        };
    },
    methods: {
        //保存
        handerSave(opportunityForm) {
            this.$refs[opportunityForm].validate(valid => {
                if (valid) {
                    //this.$message.info(JSON.stringify(this.form));
                    if (this.isAppoint) {
                        //指派
                        this.$api.opportunity.appoint(this.form.id,this.form.appointId).then(res => {
                            this.$message.success(res.msg);
                        });
                        return;
                    }
                    //添加或编辑
                    this.$api.opportunity.saveOrUpdate(this.form).then(res => {
                        this.$message.success(res.msg);
                    });
                }
            });
        },
        now(){
            let now = new Date();
            return `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
        }
    },
    created() {
        //指派操作，则查询所有的客户经理
        if (this.isAppoint) {
            //this.$message.info(this.$route.params.id);
            //当前销售机会
            this.$api.opportunity.findById(this.$route.params.id).then(res=>{
                this.form = res.data;
            });
            //客户经理
            this.$api.opportunity.findAllMgr().then(res=>{
                this.mgrList = res.data;
            });
        }
    }
};
</script>
    
<style scoped>
.el-input,
.el-select,
.el-textarea {
    width: 100% !important;
}
.btngroup{
    margin-bottom: 15px;
}
</style>